<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html lang="en">
<head>
</head>
<body>
	<!-- filter -->
	<div class="row-fluid">
		<div class="span6">
			<ul class="nav nav-pills" style="margin-bottom: 0">
				<li <c:if test="${empty param.type }">class="active"</c:if>>
					<a href="index.do"><s:message code="common.ui.filter.all" /></a>
				</li>
				<li <c:if test="${'1' eq param.type }">class="active"</c:if>>
					<a href="index.do?type=1"><i class="fa fa-question-circle"></i> <s:message code="feedback.type.1" /></a>
				</li>
				<li <c:if test="${'2' eq param.type }">class="active"</c:if>>
					<a href="index.do?type=2"><i class="fa fa-info-circle"></i> <s:message code="feedback.type.2" /></a>
				</li>
				<li <c:if test="${'3' eq param.type }">class="active"</c:if>>
					<a href="index.do?type=3"><i class="fa fa-warning"></i> <s:message code="feedback.type.3" /></a>
				</li>
				<li <c:if test="${'4' eq param.type }">class="active"</c:if>><a href="index.do?type=4"><i class="fa fa-wrench"></i> 
					<s:message code="feedback.type.4" /></a>
				</li>
			</ul>
		</div>
		<div class="pull-right">
			<form id="search-form" name="search-form" action="index.do" method="get" style="margin-bottom: 0">
				<input type="hidden" id="pageIndex" name="pageIndex" value="${pageParam.pageIndex }" /> 
				<input type="hidden" id="pageSize" name="pageSize" value="${pageParam.pageSize }" /> 
				<input type="hidden" id="sortField" name="sortField" value="${pageParam.sortField}" /> 
				<input type="hidden" id="sortOrder" name="sortOrder" value="${pageParam.sortOrder}" /> 
				<input type="hidden" id="type" name="type" value="${li:out(param.type) }" />
				<div class="input-append">
					<input id="keywords" name="keywords" type="text" value="${li:out(param.keywords) }">
					<button class="btn" type="submit">
						<i class="icon-search"></i>
					</button>
				</div>
			</form>
		</div>
	</div>
	<!-- toolbar -->
	<div class="toolbar"></div>
	<!-- datatable -->
	<div class="accordion" id="feedbackList">
		<c:forEach items="${pageList.rsList }" var="row">
			<div class="accordion-group">
				<div class="accordion-heading">
					<div class="pull-right">
						<span class="muted">[${li:formatDate(row.createDatetime) }]</span>
						<button class="red btn-link" onclick="rowDelete(${row.id});">
							<i class="icon-trash"></i>
						</button>
					</div>
					<a class="accordion-toggle" data-toggle="collapse" data-parent="#feedbackList" href="#collapse${row.id }"> 
						<span class="label label-info"><s:message code='feedback.type.${row.type }' /></span>&nbsp;
						<c:if test="${not empty row.replyBy }">
							<span class="label label-success"><s:message code='feedback.isReplied'></s:message></span>&nbsp;
						</c:if>
						${li:out(row.content) }
					</a>
				</div>
				<div id="collapse${row.id }" class="accordion-body collapse">
					<div class="accordion-inner">${li:escapeTextarea(row.reply) } </div>
				</div>
			</div>
		</c:forEach>
	</div>
	<h:pager params="${pageList }" formId="datatable" theme="simple"></h:pager>

	<script type="text/javascript">
		$(document).ready(function(){				
			
		})
					
		function rowDelete(id){			
			bootbox.confirm("<s:message code='common.delete.confirm' />", function(result){
				if(result)
				{
					$.webtools.ajax({
						url: "delete.json",
						params: {"id":id},
						success: function(reply) {
							location.reload();
						}
					});					
				}				
			});			
		}		
	</script>
</body>
</html>
